<template>
  <div class="page luckdraw-partner">
    <div class="total" v-if="isWinner === '1'">共 {{totalNumber}} 位中奖者</div>
    <div class="total" v-else>共 {{totalNumber}} 位参与者</div>
    <div class="list-container">
      <partner-list v-for="(item, i) in partners" :key="i" :listData="item" :isMultiRank="isMultiRank"></partner-list>
    </div>
    <div class="load-more">
      <span v-if="showNoMore">没有更多了</span>
      <span v-if="showLoadMore">加载中...</span>
    </div>
  </div>
</template>

<script>
import PartnerList from 'comp/partner-list'
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  components: {
    PartnerList
  },
  data () {
    return {
      activityId: '',
      isWinner: '',
      openId: '',
      totalNumber: 0,
      partners: [],
      pageNumber: 1,
      showNoMore: false,
      showLoadMore: false
    }
  },
  async mounted () {
    this.resetData()
    const query = this.$root.$mp.query
    this.activityId = query.activityId
    this.isWinner = query.isWinner
    this.isMultiRank = query.isMultiRank === '1'

    this.openId = await this.getOpenId()
    this.setTitle()
    this.getPageData()
  },
  onReachBottom () {
    // 页面上拉触底事件的处理函数
    if (this.showLoadMore) {
      this.getPageData()
    }
  },
  methods: {
    setTitle () {
      let title = ''
      if (this.isWinner === '1') {
        title = '中奖用户'
      } else {
        title = '抽奖参与用户'
      }
      wx.setNavigationBarTitle({
        title
      })
    },
    async getPageData () {
      let pageNumber = this.pageNumber
      const ret = await this.$store.dispatch('getActivityPlayer', {
        activityid: this.activityId,
        page: pageNumber++,
        rows: 30,
        iswinner: this.isWinner === '1' ? 1 : '',
        playerid: this.openId
      })
      const arr1 = this.partners
      const arr2 = ret.list
      if (arr1.length === 0 && arr2.length === 0) {
        // 无参与用户
        this.showNoMore = false
        this.showLoadMore = false
      } else {
        if (ret.list.length < 30) {
          // 没有更多了
          this.showNoMore = true
          this.showLoadMore = false
        } else {
          // 加载中...
          this.showLoadMore = true
        }
      }
      this.partners = arr1.concat(arr2)
      this.pageNumber = pageNumber
      this.totalNumber = ret.count
    }
  }
}
</script>

<style lang="less" scoped>
.luckdraw-partner {
  .total {
    text-align: center;
    padding: 30rpx 0;
    color: #777;
    font-size: 30rpx;
  }
  .load-more {
    text-align: center;
    color: #488ff0;
    font-size: 30rpx;
    padding: 30rpx 0 40rpx;
  }
}
</style>

